<template>
  <div>
    <!-- 搜索栏 -->
    <el-card id="search">
      <el-row>
        <el-col :span="20">
          <!-- 传的参数名必须和searchModel.stuId，必须和后端一模一样 -->
            <el-input v-model="searchModel.stuId" placeholder="学号" clearable></el-input>
            <el-input v-model="searchModel.stuName" placeholder="姓名" clearable></el-input>
            <el-input v-model="searchModel.grade" placeholder="年级" clearable></el-input>
            <el-button @click="getSchoList" type="primary" round icon="el-icon-search">查询</el-button>
        </el-col>
        <el-col :span="4" align="right">
            <el-button type="primary" icon="el-icon-plus" circle></el-button>
        </el-col>
      </el-row>
    </el-card>


    <!-- 结果列表 -->
    <el-card>
       <el-table
          :data="scholarship"
          stripe
          style="width: 100%">
          <!-- prop属性名必须和返回的请求中的键值名一样才行否则无法渲染成功 -->
          <el-table-column
            type="index"
            label="#"
            width="70">
            <!-- (pageNo-1)*pageSize+index+1 -->
            <template slot-scope="scope">
                {{(searchModel.pageNo-1) * searchModel.pageSize + scope.$index + 1}}
            </template>
            
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="100">
          </el-table-column>
          <el-table-column
            prop="studentId"
            label="学号"
            width="100">
          </el-table-column>
          <el-table-column
            prop="grade"
            label="年级"
            width="100">
          </el-table-column>
          <el-table-column
            prop="scho"
            label="奖项"
            width="100">
          </el-table-column>
          <el-table-column
            prop="scholarshipS"
            label="奖金"
            width="100">
          </el-table-column>
          <el-table-column
            prop="score"
            label="加权成绩"
            width="100">
          </el-table-column>
          
          
        </el-table>
    </el-card>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


  </div>
</template>


<script>
import helpfuncApi from '@/api/helpfunc'

export default {
  data(){
    return{
      searchModel:{
        total:0,
        pageNo: 1,
        pageSize: 10

      },
      scholarship:[]

    }
  },
  methods:{
    handleSizeChange(pageSize){
      this.searchModel.pageSize = pageSize;
      this.getSchoList();

    },
    handleCurrentChange(pageNo){
      this.searchModel.pageNo = pageNo;
      this.getSchoList();

    },
    getSchoList(){
        helpfuncApi.getSchoList(this.searchModel).then(Response => {
          // debugger
          // console.log("请求log",Response);
          this.scholarship = Response.data.rows;
          this.total = Response.data.total
        })
    }
  },
  //钩子函数：异步调用生成数据渲染在前端
  created(){
    this.getSchoList();
  }

}
</script>

<style>
#search .el-input{
  width: 200px;
  margin-right: 10px;
}


</style>